/**
 * 移动端平台需求文档生成提示词
 * 用于从Axure移动端原型HTML生成结构化需求文档
 * 特别关注:多状态画面识别(同一位置的多个状态切换)
 */

interface MobilePromptOptions {
  systemName?: string;
  moduleName?: string;
  pageMode?: 'new' | 'modify';
  businessDescription?: string;
  redFields?: string[];
}

export function getMobileRequirementPrompt(options: MobilePromptOptions): string {
  const { systemName, moduleName, pageMode, businessDescription, redFields = [] } = options;

  return `# 📱 移动端 Axure HTML 解析策略

## 🔥 移动端多状态画面识别(极其重要!)

**核心问题**: 移动端Axure原型中,经常会在**同一个位置**出现多个画面,这些画面通过 \`display:none\` 切换,代表不同的状态(空状态、加载中、有数据、编辑状态、错误状态等)。

**识别策略**:

### 1️⃣ 查找隐藏元素
在HTML中搜索所有潜在的状态画面:
- 搜索包含 \`style="display:none"\` 或 \`style="visibility:hidden"\` 的div元素
- 搜索包含 \`class="ax_default_hidden"\` 的元素
- 搜索包含 \`style\` 属性且值包含 \`display: none\` 或 \`visibility: hidden\` 的元素

### 2️⃣ 判断是否为同位置多状态画面
检查元素的位置坐标:
- 提取所有疑似状态画面的 \`data-left\` 和 \`data-top\` 属性值
- 如果多个元素(包括可见和隐藏)的位置坐标**完全相同**或**非常接近**(相差<50px)
- 则判定为**同一位置的多状态画面**

**示例结构**:
\`\`\`html
<!-- 状态1: 正常有数据(可见) -->
<div id="u3556" data-left="0" data-top="100" style="display:block">
  <div class="text">您的购物车</div>
  <button>去结算</button>
</div>

<!-- 状态2: 管理模式(隐藏) -->
<div id="u3601" data-left="0" data-top="100" style="display:none">
  <div class="text">您的购物车</div>
  <button>删除</button>
  <button>退出管理</button>
</div>

<!-- 状态3: 空状态(隐藏) -->
<div id="u3650" data-left="0" data-top="100" style="display:none">
  <div class="text">您还没有添加任何商品哦~</div>
  <button>去逛逛</button>
</div>
\`\`\`
→ 这三个div的 \`data-left\` 和 \`data-top\` 完全相同,应识别为同一位置的三个状态画面

### 3️⃣ 识别状态类型
根据画面内容关键词和UI元素,判断每个状态的类型:

**🔴 空状态(Empty State)**:
- **文本关键词**: "暂无数据"、"空空如也"、"还没有"、"暂时没有"、"快去"、"去逛逛"、"去添加"
- **图标特征**: class包含 "empty"、"no-data"、"placeholder"
- **按钮文案**: "去添加"、"去逛逛"、"立即体验"、"开始使用"
- **视觉特征**: 通常包含空状态插图或图标

**🔵 加载中状态(Loading State)**:
- **文本关键词**: "加载中..."、"正在加载"、"请稍候"、"数据加载中"
- **图标特征**: class包含 "loading"、"spinner"、"rotate"、"skeleton"
- **视觉特征**: 加载动画、骨架屏(skeleton screen)、转圈图标

**🟢 正常/有数据状态(Normal/Data State)**:
- **UI特征**: 包含实际的数据列表、卡片、表格
- **按钮类型**: "详情"、"编辑"、"删除"、"去结算"、"提交"等业务操作按钮
- **无空状态或加载中的关键词**

**🟡 编辑/管理状态(Edit/Management State)**:
- **文本关键词**: "管理"、"编辑"、"完成"、"退出管理"、"批量删除"、"全选"
- **UI特征**: 出现删除按钮、复选框、批量操作按钮
- **按钮文案**: "删除"、"完成"、"取消"、"保存"、"全选"、"退出管理"
- **视觉变化**: 列表项左侧出现选择框、删除图标变为可见

**🔴 错误状态(Error State)**:
- **文本关键词**: "加载失败"、"网络异常"、"请求超时"、"出错了"、"稍后重试"
- **图标特征**: class包含 "error"、"fail"、"warning"
- **按钮文案**: "重试"、"刷新"、"返回"
- **视觉特征**: 错误图标、红色提示文字

**🟣 权限不足状态(Permission Denied State)**:
- **文本关键词**: "无权限"、"暂无访问权限"、"需要授权"、"立即开通"
- **按钮文案**: "申请权限"、"去授权"、"联系管理员"

### 4️⃣ 生成需求文档章节
为每个状态生成独立的子章节,示例结构:

\`\`\`markdown
### 1.1 购物车页面

#### 功能描述
用户可查看购物车商品,进行结算、管理(删除)等操作。

#### 页面类型
移动端列表页(多状态)

---

#### 🔄 状态切换说明
该页面存在以下3种状态,根据不同场景切换:
1. **初始状态(有商品)**: 默认显示,购物车有商品时
2. **管理状态**: 用户点击"管理"按钮后进入
3. **空状态**: 购物车无商品时显示

---

#### 1.1.1 初始状态(有商品)
**触发条件**: 购物车中有商品

**UI元素识别** (来源: div#u3556, data-left="0", data-top="100", display:block)

##### 列表展示字段
| 字段名 | 数据类型 | 格式 | 说明 |
|--------|---------|------|------|
| 商品图片 | 图片 | - | 商品主图 |
| 商品名称 | 文本 | - | 商品标题 |
| 商品规格 | 文本 | - | 颜色/尺寸等规格 |
| 单价 | 数字 | ¥0.00 | 商品单价 |
| 数量 | 数字 | - | 购买数量 |
| 小计 | 数字 | ¥0.00 | 单价×数量 |

##### 操作按钮
| 按钮名称 | 位置 | 操作说明 |
|---------|------|---------|
| 管理 | 页面右上角 | 进入管理状态,可删除商品 |
| 去结算 | 页面底部 | 跳转到结算页面 |
| - (减号) | 每个商品行 | 减少商品数量 |
| + (加号) | 每个商品行 | 增加商品数量 |

##### 业务规则
1. 合计金额 = 所有商品小计之和
2. 数量最小为1,点击减号至1时,不再继续减少
3. 数量超过库存时,显示"库存不足"提示

---

#### 1.1.2 管理状态
**触发条件**: 用户点击"管理"按钮

**UI元素识别** (来源: div#u3601, data-left="0", data-top="100", display:none)

##### 列表展示字段
(与初始状态相同,但每个商品行左侧增加复选框)

##### 操作按钮
| 按钮名称 | 位置 | 操作说明 |
|---------|------|---------|
| 退出管理 | 页面右上角 | 返回初始状态 |
| 删除 | 页面底部 | 删除选中的商品 |
| 全选 | 页面底部左侧 | 选中/取消所有商品 |
| 复选框 | 每个商品行左侧 | 选择要删除的商品 |

##### 业务规则
1. 删除操作需二次确认,弹窗提示"确定删除选中的商品吗?"
2. 全选状态下,点击全选按钮变为取消全选
3. 删除后自动返回初始状态(若还有商品)或空状态(若无商品)

---

#### 1.1.3 空状态
**触发条件**: 购物车无商品

**UI元素识别** (来源: div#u3650, data-left="0", data-top="100", display:none)

##### 页面元素
- 空状态图标(购物车空箱子图标)
- 提示文字: "您还没有添加任何商品哦~"

##### 操作按钮
| 按钮名称 | 位置 | 操作说明 |
|---------|------|---------|
| 去逛逛 | 页面中央 | 跳转到首页或商品列表页 |

##### 业务规则
1. 空状态下不显示"管理"按钮
2. 点击"去逛逛"跳转到首页

---

\`\`\`

### 5️⃣ 状态画面命名规范
为每个状态起准确的名称:
- **初始状态** / **正常状态** / **默认状态** (有数据时的正常展示)
- **管理状态** / **编辑模式** (可进行批量操作)
- **空状态** / **无数据状态** (无内容时的提示)
- **加载中状态** (数据加载中)
- **错误状态** / **加载失败状态** (请求失败时)

---

## 1️⃣ 移动端页面类型识别

**🔥 移动端常见页面类型:**

### 📱 TabBar底部导航页
**识别特征**:
- 页面底部有固定导航栏(通常4-5个图标+文字)
- 导航项文案: "首页"、"分类"、"购物车"、"我的"、"发现"等
- class包含: "tabbar"、"tab-bar"、"bottom-nav"
- 每个导航项通常包含图标(icon)和文字(label)

**示例结构**:
\`\`\`html
<div class="tabbar">
  <div class="tab-item">
    <img src="home-icon.png" />
    <span>首页</span>
  </div>
  <div class="tab-item">
    <img src="cart-icon.png" />
    <span>购物车</span>
  </div>
</div>
\`\`\`

### 📋 卡片列表页
**识别特征**:
- 包含多个卡片(card)组件,每个卡片是独立的容器
- class包含: "card"、"item"、"list-item"
- 每个卡片通常包含:图片、标题、副标题、标签、价格、按钮等
- 支持下拉刷新和上拉加载更多

### 📜 长屏详情页
**识别特征**:
- 页面内容很长,需要滚动查看(通常>2000px高度)
- 包含多个信息区块: 商品图、基本信息、详情图、评论、推荐等
- 底部通常有固定的操作栏(加入购物车、立即购买等)
- class包含: "detail"、"product-detail"、"scroll-view"

### 📝 移动端表单页
**识别特征**:
- 包含多个输入控件: input、textarea、picker、switch等
- 每个表单项通常是一行(label在左,输入框在右)
- class包含: "form"、"cell"、"field"
- 底部有提交按钮: "提交"、"保存"、"下一步"、"确认"

### 🪟 底部弹出层(ActionSheet/BottomSheet)
**识别特征**:
- 从底部弹出的半屏或全屏浮层
- class包含: "action-sheet"、"bottom-sheet"、"popup"、"modal"
- 通常包含多个选项按钮或一个表单
- 包含关闭按钮或遮罩层(点击关闭)

### 🔔 对话框(Dialog/Alert)
**识别特征**:
- 屏幕中央弹出的小型对话框
- 包含标题、内容、确定/取消按钮
- class包含: "dialog"、"alert"、"modal"、"popup"
- 背景有半透明遮罩

---

## 2️⃣ 移动端特有组件识别

### 📥 下拉刷新(Pull to Refresh)
**识别特征**:
- 页面顶部有"下拉刷新"提示文字或图标
- class包含: "pull-refresh"、"refresh"、"pulldown"
- 可能包含刷新图标(旋转箭头、loading动画)

**需求文档说明**:
- 在"交互说明"章节添加: "支持下拉刷新,刷新后重新加载最新数据"

### 📤 上拉加载更多(Load More)
**识别特征**:
- 列表底部有"加载更多"、"上拉加载"文字
- class包含: "load-more"、"infinite-scroll"、"pullup"
- 可能显示"加载中..."、"已加载全部"等状态文字

**需求文档说明**:
- 在"交互说明"章节添加: "支持上拉加载更多,每次加载20条数据,加载完后显示'已加载全部'"

### 🎭 Tab选项卡切换
**识别特征**:
- 页面顶部或中部有多个tab标签
- 文案: "全部"、"待支付"、"待发货"、"已完成"等
- class包含: "tabs"、"tab"、"segment"
- 当前激活tab有高亮样式(active、selected)

**需求文档说明**:
- 提取所有tab选项的文案和对应的筛选条件

### 🎚️ 开关(Switch)
**识别特征**:
- 切换按钮,有开/关两种状态
- class包含: "switch"、"toggle"
- 通常用于设置项: "消息通知"、"自动播放"等

### 📅 日期/时间选择器(Picker)
**识别特征**:
- 点击输入框后弹出滚轮选择器
- class包含: "picker"、"date-picker"、"time-picker"
- 显示"请选择日期"、"请选择时间"等placeholder

### 🏷️ 标签(Tag/Badge)
**识别特征**:
- 小型标签,用于标注状态、分类
- 文案: "热门"、"新品"、"VIP"、"折扣"等
- class包含: "tag"、"badge"、"label"
- 通常有背景色(红色、蓝色、灰色等)

---

## 3️⃣ 移动端手势操作识别

### 👆 长按(Long Press)
**识别提示**:
- 文字说明: "长按删除"、"长按可编辑"、"长按可预览"
- 通常用于: 删除、编辑、预览、保存图片等操作

**需求文档说明**:
- 在"交互说明"添加: "长按商品图片可预览大图"

### 👉 左滑/右滑(Swipe)
**识别提示**:
- 文字说明: "左滑删除"、"右滑返回"
- 通常用于: 列表项左滑显示删除按钮、右滑返回上一页

**需求文档说明**:
- 在"交互说明"添加: "左滑列表项显示删除按钮"

### 👇 双击(Double Tap)
**识别提示**:
- 文字说明: "双击放大"、"双击点赞"
- 通常用于: 图片双击放大、视频双击点赞

---

## 4️⃣ 移动端特有业务规则

### 📲 权限申请
**识别场景**:
- 文字包含: "需要相机权限"、"需要位置权限"、"需要通知权限"
- 按钮: "去设置"、"允许"、"拒绝"

**需求文档说明**:
- 在"业务规则"添加: "首次使用扫一扫功能时,需要申请相机权限"

### 🌐 网络状态检测
**识别场景**:
- 文字包含: "网络连接失败"、"请检查网络"、"网络不给力"
- 按钮: "重试"、"刷新"

**需求文档说明**:
- 在"业务规则"添加: "网络断开时,显示网络异常提示,点击重试按钮重新请求"

### 💾 离线缓存
**识别场景**:
- 文字包含: "离线可用"、"已缓存"、"本地数据"

**需求文档说明**:
- 在"业务规则"添加: "数据支持离线缓存,网络断开时可查看已缓存数据"

---

## 5️⃣ 移动端UI尺寸和布局

### 📐 屏幕尺寸适配
- 移动端原型宽度通常是: 375px(iPhone)、360px(Android)、414px(iPhone Plus)
- 需要说明是否支持横屏(landscape)

### 🎨 字体和颜色
- 提取主要字体大小: 标题(32px/28px)、正文(28px/26px)、辅助(24px/22px)
- 提取主要颜色: 主题色、辅助色、成功色、警告色、错误色

---

# 📄 输出格式规范

\`\`\`markdown
# ${systemName || '系统名称'} - ${moduleName || '模块名称'}需求文档 (移动端)

## 1. 功能模块1

### 1.1 功能点名称

#### 功能描述
简要描述该移动端功能的业务目标和用途。

#### 页面类型
TabBar底部导航页 / 卡片列表页 / 长屏详情页 / 移动端表单页 / 底部弹出层 / 对话框

#### 平台支持
- iOS / Android / H5

---

### 📱 如果是TabBar底部导航页:

#### 底部导航栏
| 导航项名称 | 图标 | 跳转目标 | 说明 |
|----------|------|---------|------|
| 首页 | home-icon | 首页 | 默认选中 |
| 分类 | category-icon | 分类页 | - |
| 购物车 | cart-icon | 购物车页 | 显示商品数量角标 |
| 我的 | user-icon | 个人中心 | - |

---

### 📋 如果是卡片列表页:

#### 列表卡片字段
| 字段名 | 数据类型 | 格式 | 说明 | 来源 |
|--------|---------|------|------|------|
| 商品图片 | 图片 | - | 商品主图,点击可预览 | div.image |
| 商品名称 | 文本 | - | 商品标题,最多显示2行 | div.title |
| 价格 | 数字 | ¥0.00 | 商品售价 | div.price |
| 标签 | 标签组 | - | 显示"热销"、"新品"等标签 | div.tag |

#### 交互说明
1. 支持下拉刷新,刷新后重新加载最新数据
2. 支持上拉加载更多,每次加载20条,加载完显示"已加载全部"
3. 点击卡片跳转到商品详情页
4. 长按商品图片可预览大图

---

### 📜 如果是长屏详情页:

#### 页面结构
1. **商品图区**: 轮播图,支持左右滑动切换,显示图片指示器(1/5)
2. **基本信息区**: 商品名称、价格、标签、销量
3. **规格选择区**: 点击弹出规格选择底部弹出层
4. **商品详情区**: 长图展示,支持滚动查看
5. **评价区**: 显示评价列表,点击"查看更多"跳转到评价页
6. **推荐区**: 相关商品推荐

#### 底部固定操作栏
| 按钮名称 | 位置 | 按钮类型 | 操作说明 |
|---------|------|---------|---------|
| 客服 | 左侧 | 图标按钮 | 打开客服对话 |
| 收藏 | 左侧 | 图标按钮 | 收藏商品,已收藏显示红色 |
| 加入购物车 | 中间 | 次要按钮 | 添加到购物车 |
| 立即购买 | 右侧 | 主要按钮 | 跳转到结算页 |

---

### 📝 如果是移动端表单页:

#### 表单字段
| 字段名 | 控件类型 | 必填 | 默认值 | 说明 | 可选值/枚举 | 验证规则 |
|--------|---------|------|--------|------|-----------|---------|
| 收货人 | 文本框 | 是 | - | 输入收货人姓名 | - | 2-20字符 |
| 手机号 | 文本框 | 是 | - | 输入手机号 | - | 11位手机号 |
| 所在地区 | 选择器 | 是 | - | 选择省市区 | - | 必须选择到区 |
| 详细地址 | 文本框 | 是 | - | 输入详细地址 | - | 5-100字符 |
| 设为默认 | 开关 | 否 | 关 | 是否设为默认地址 | - | - |

#### 操作按钮
| 按钮名称 | 位置 | 按钮类型 | 操作说明 |
|---------|------|---------|---------|
| 保存 | 底部 | 主要按钮 | 保存地址信息 |

---

### 🪟 如果是底部弹出层:

#### 弹出层内容
(格式与表单页相同)

#### 交互说明
1. 从底部弹出,有上滑动画
2. 点击遮罩层关闭
3. 点击关闭按钮关闭
4. 选择完成后自动关闭

---

\`\`\`

---

# 🚨 重要规范

## 中文术语规范
**页面类型必须使用中文:**
- ❌ 不要用: list, dialog, form, detail, tabbar, actionsheet
- ✅ 必须用: 列表页, 对话框, 表单页, 详情页, 底部导航页, 底部弹出层

**移动端组件必须使用中文:**
- ❌ 不要用: pull-refresh, load-more, switch, picker, tag
- ✅ 必须用: 下拉刷新, 上拉加载, 开关, 选择器, 标签

## 多状态画面识别规范
**🔥 最重要的识别规则:**
1. **必须识别所有隐藏的状态画面**(display:none)
2. **通过坐标判断是否为同位置画面**(data-left、data-top)
3. **根据内容关键词准确分类状态类型**(空状态/加载中/编辑/错误)
4. **为每个状态生成独立子章节**
5. **在主功能点开头添加"状态切换说明"**

## 移动端交互说明
**必须包含以下移动端特有交互:**
- 下拉刷新规则(如果有)
- 上拉加载规则(如果有)
- 手势操作说明(长按、滑动、双击等)
- Tab切换逻辑(如果有)

## 移动端业务规则
**必须包含以下移动端特有规则:**
- 权限申请场景(相机、位置、通知等)
- 网络异常处理(无网络、超时、失败重试)
- 离线缓存规则(如果支持)

---

请严格按照上述移动端解析策略分析HTML并生成需求文档。

**⚠️ 特别提醒: 移动端原型最重要的是识别多状态画面!请务必仔细检查所有隐藏元素,不要遗漏任何状态!**

${pageMode === 'modify' ? `
# 🆕 修改页面模式特别说明

这是一个【修改页面】,页面上的红色标记代表本次迭代新增或修改的UI元素。

## 📋 业务描述(本次迭代的变更说明)
${businessDescription || '(未找到业务描述,请根据页面红色标记自行推断)'}

## 🔴 页面上的红色字段(新增的UI元素)
${redFields.length > 0 ? redFields.map((f, i) => `${i + 1}. ${f}`).join('\n') : '(未检测到红色字段)'}

## 你的任务

1. **分析变更内容**:
   - 从业务描述中识别变更类型:
     * 包含"新增"、"增加"、"添加" → 🆕 新增功能
     * 包含"修改"、"调整"、"变更" → ✏️ 修改功能
     * 包含"删除"、"移除" → ❌ 删除功能

2. **生成需求文档格式**:
   - 在需求文档开头增加【变更摘要】章节
   - 标注每个变更点的类型(🆕 ✏️ ❌)

3. **变更摘要格式**:
\`\`\`markdown
## 变更摘要

### 🆕 新增功能
- 购物车新增【管理状态】,支持批量删除
- 新增【空状态】画面,无商品时显示
...

### ✏️ 修改功能
- 商品卡片样式调整,增加标签显示
...

### ❌ 删除功能
- (如果有)

### ➖ 原有功能(未变更)
- 购物车商品列表基本展示
- 结算功能
...(简要列出)
\`\`\`

4. **测试重点建议**:
   - 在需求文档末尾增加【测试重点】章节
   - 标注哪些是新增测试点(需重点测试)
   - 标注哪些是回归测试点(需验证修改)
   - **特别关注多状态画面的切换逻辑测试**
` : ''}`;
}
